import {PlusOutlined} from '@ant-design/icons'
import {
    Col,
    Row,
    Flex,
    Typography,
    Button,
    Input,
    Cascader,
    Form,
    Table,
    Alert,
    Switch,
    Image,
    message,
    Select,
    Tag
} from 'antd'
import React from 'react'
import {useEffect} from 'react'
import {useState} from 'react'
import {Link, useNavigate} from 'react-router-dom'
import {adminCouponList} from '../service/activaty'

function ShopQrcode() {
    const navigate = useNavigate()
    const [qrcodeList, setQrcodeList] = useState([])
    const [total, setTotal] = useState(0)
    const [pageNo, setPageNo] = useState(1)
    const [condition, setCondition] = useState({})
    // 保存表格中选中的项
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 表格中是否有选中
    const hasSelected = selectedRowKeys.length > 0
    // 二维码可见
    const [visible, setVisible] = useState(false)
    // 弹出二维码路径
    const [qrcodeUrl, setQrcodeUrl] = useState('')
    const [n, setN] = useState(0)
    useEffect(() => {
        ;(async () => {
            const res = await adminCouponList({
                pageNo,
                pageSize: 10
            })
            if (res.data) {
                setQrcodeList(res.data.objects)
                setTotal(res.data.total)
            }
            console.log(res)
        })()
    }, [n])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => navigate('/admin/market/addCoupon')}
                        >
                            新建优惠券
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form
                        layout="inline"
                        onFinish={async (v) => {
                            console.log(v)
                            setCondition({
                                storeName: v.storeName,
                                storeAddress: v.storeAddress ? v.storeAddress.join() : ''
                            })
                            console.log(condition)
                            const res = await adminCouponList({
                                ...condition,
                                pageNo,
                                pageSize: 10
                            })
                            // console.log(res)
                            setQrcodeList(res.data.objects)
                            setTotal(res.data.total)
                        }}
                    >
                        <Form.Item label="优惠券名称" name="storeName">
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="优惠券类型"
                            name="storeAddress"
                            initialValue={'0'}
                        >
                            <Select
                                options={[
                                    {value: '0', label: '全部'},
                                    {value: '1', label: '满减'},
                                    {value: '2', label: '折扣'},
                                    {value: '3', label: '随机'}
                                ]}
                                style={{width: 200}}
                            />
                        </Form.Item>
                        <Form.Item label="优惠券状态" name="status" initialValue={'0'}>
                            <Select
                                options={[
                                    {value: '0', label: '全部'},
                                    {value: '1', label: '未开始'},
                                    {value: '2', label: '进行中'},
                                    {value: '3', label: '已结束'}
                                ]}
                                style={{width: 200}}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            {/* 表格 */}
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        优惠券列表
                    </Typography.Paragraph>
                    {hasSelected && (
                        <Alert
                            message={`已经选择 ${selectedRowKeys.length} 项`}
                            type="info"
                            showIcon
                        />
                    )}
                </Col>
                <Col span={24}>
                    <Table
                        pagination={{
                            total,
                            defaultCurrent: 1,
                            onChange: async (page) => {
                                const res = await adminCouponList({
                                    ...condition,
                                    pageNo: page,
                                    pageSize: 10
                                })
                                setQrcodeList(res.data.objects)
                                // setTotal(res.data.total)
                            }
                        }}
                        rowKey="id"
                        rowSelection={{
                            selectedRowKeys,
                            onChange: (newSelectedRowKeys) => {
                                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                                setSelectedRowKeys(newSelectedRowKeys)
                            }
                        }}
                        dataSource={qrcodeList}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '优惠券名称',
                                dataIndex: 'couponName',
                                key: 'couponName'
                            },
                            {
                                title: '适用范围',
                                dataIndex: 'applicable',
                                key: 'applicables'
                            },
                            {
                                title: '优惠内容',
                                dataIndex: 'describes',
                                key: 'describes'
                            },
                            {
                                title: '状态',
                                dataIndex: 'status',
                                key: 'status',
                                render: (_, record) => {
                                    switch (record.status) {
                                        case 0:
                                            return <Tag color="blue">未开始</Tag>
                                        case 1:
                                            return <Tag color="green">进行中</Tag>
                                        case 2:
                                            return <Tag color="red">已结束</Tag>
                                        default:
                                            return <Tag color="blue">未开始</Tag>
                                    }
                                }
                            },
                            {
                                title: '数量',
                                dataIndex: 'usageNum',
                                key: 'usageNum',
                                render: (_, record) => {
                                    return <>{record.usageNum}张</>
                                }
                            },
                            {
                                title: '有效期',
                                dataIndex: 'startDate',
                                key: 'startDate',
                                render: (_, record) => {
                                    return (
                                        <>
                                            {record.startDate.substring(0, 10)} -{' '}
                                            {record.endDate.substring(0, 10)}
                                        </>
                                    )
                                }
                            },
                            {
                                title: '启用状态',
                                dataIndex: 'enableStatus',
                                key: 'enableStatus',
                                render: (_, record) => {
                                    return <Switch checked={record.enableStatus === 1}/>
                                }
                            },
                            {
                                title: '操作',
                                dataIndex: 'op',
                                key: 'op',
                                align: 'center',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <Link to={`/admin/market/editCoupon/${record.id}`}>
                        编辑
                      </Link>
                      <a onClick={() => {
                      }}>删除</a>
                    </span>
                                    )
                                }
                            }
                        ]}
                    />
                </Col>
            </Row>
            <Image
                width={200}
                style={{
                    display: 'none'
                }}
                src={qrcodeUrl}
                preview={{
                    className: 'centerBox',
                    width: 220,
                    visible,
                    src: {qrcodeUrl},
                    onVisibleChange: (value) => {
                        setVisible(value)
                    }
                }}
            />
        </>
    )
}

export default ShopQrcode
